﻿@section Styles {
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/Notifications/Index.css" asp-append-version="true" />
}
@section Scripts {
    <script abp-src="/view-resources/Areas/AppAreaName/Views/Notifications/Index.js" asp-append-version="true"></script>
}

<div class="m-subheader ">
    <div class="row align-items-center">
        <div class="mr-auto col-sm-12 col-md-6">
            <h3 class="m-subheader__title">
                <span>@L("Notifications")</span>
            </h3>
        </div>
        <div class="col-sm-12 col-md-6 text-right">
            <button class="btn btn-success" id="btnOpenNotificationSettingsModal"><i class="la la-cog"></i> @L("NotificationSettings")</button>
            <button class="btn btn-primary" id="btnSetAllNotificationsAsRead"><i class="la la-check"></i> @L("SetAllAsRead")</button>
        </div>
    </div>
</div>

<div class="m-content">
    <div class="m-portlet m-portlet--mobile">
        <div class="m-portlet__body">
            <div class="m-form m-form--label-align-right">
                <div class="row m--margin-bottom-10">
                    <div class="col-xl-6">
                        <div class="form-group">
                            <select id="TargetValueFilterSelectionCombobox" class="form-control bs-select">
                                <option value="">@L("All")</option>
                                <option value="UNREAD">@L("Unread")</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xl-6 text-right">
                        <div class="form-group">
                            <button id="RefreshNotificationTableButton" class="btn btn-metal"><i class="la la-refresh"></i> @L("Refresh")</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row align-items-center">
                <table id="NotificationsTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap">
                    <thead>
                        <tr>
                            <th></th>
                            <th>@L("Actions")</th>
                            <th>@L("Notification")</th>
                            <th>@L("CreationTime")</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>